<template>
	<div class="newVip">
		<div class="box">
			<p class="ts"><span>一二级密码初始为：123456</span>（登陆后请尽快修改密码）</p>
			<ul class="list">
				<li>
					<span class="ps">会员编号</span>
					<p><input type="text"  @blur='userNameEv' v-model='username'><span class="tip">不可用</span></p>
				</li>
				<li>
					<span class="ps">玩家名称</span>
					<p><input type="text" v-model='nickname' placeholder='请输入玩家名称'></p>
				</li>
				<li>
					<span class="ps">手机号码</span>
					<p><input type="number" placeholder="请您输入手机号" v-model="mobile" oninput="if(value.length>11)value=value.slice(0,11)"></p>
				</li>
				<!-- <li class="yz">
					<span class="ps">手机验证码</span>
					<p>
						<input placeholder="请您输入验证码" v-model="code">
						<button :disabled='isDisabled' @click='getCode'>{{ phoneCodeTxt }}</button>
					</p>
				</li> -->
				<li>
					<span class="ps">分享王编号</span>
					<p><input type="text" v-model='tjuser' @blur="shareEv" placeholder='请输入分享王编号'></p>
					<p style='margin-left:10px;'>{{shareTxt}}</p>
				</li>
				<li>
					<span class="ps">部落王编号</span>
					<p><input type="text" v-model='gluser' @blur='tribeEv' placeholder='请输入部落王编号'><span class="tip"></span></p>
					<p style='margin-left:10px;'>{{posRightTxt}}</p>
				</li>
				<li>
					<span class="ps">位置</span>
					<p>
						<select name="" id="" @change='positionEv' v-model="pos">
							<option v-for='(v,i) of opArr' :key='i' :value="i+1">{{v.v}}</option>
						</select>
					</p>
				</li>
			</ul>
			<button class="sub" @click='getData'>立即注册</button>
		</div>
		<!-- <div class="posWin">
			<div class="posBg"><p>抱歉，注册功能维护中，请稍后再试！</p></div>
		</div> -->
	</div>
</template>

<script>
import { phoneCode, regiset, tribe, position, userCodeVis, shareVis } from '../../config/getData'
import { getLoca} from '../../assets/js/common'
import { mapState } from 'vuex'

export default {
  data() {
    return {
      opArr:[
        {i:1,v:'A部落'},
        {i:2,v:'B部落'}
	  ],
	  phoneCodeTxt:'点击获取',
	  isDisabled: false,
      username: "",
      nickname: "",
      mobile: "",
      code: "",
      tjuser: "",
      gluser: "",
	  pos:"1",
	  posRightTxt: '',
	  shareTxt:'',
    }
  },
  created () {
	var clickIndex = sessionStorage.clickIndex
	var username = this.$route.params.username
	var id = this.$route.params.id
	this.gluser = username
	this.pos = id

	this.tjuser = this.userInfo.username
  },
  methods: {
	  shareEv(){
		  if(!this.tjuser) return;
		  shareVis(this.tjuser).then( res => {
			this.$vux.toast.show(res.msg, 'top')
			this.shareTxt = res.data
		  })
	  },
	  userNameEv(){
		  if(!this.username) return;

		  userCodeVis(this.username).then( res => {
			this.$vux.toast.show(res.msg, 'top')
		  })
	  },
	positionEv(){
		position(this.tjuser,this.gluser, this.pos).then( res => {
			this.$vux.toast.show(res.msg, 'top')
		})
	},
	tribeEv(){
		if(!this.gluser) return ;
		this.posRightTxt = ''
		tribe(this.tjuser,this.gluser).then( res => {
			this.$vux.toast.show(res.msg, 'top')
			this.posRightTxt = res.data
		})
	},
    getCode() {
		phoneCode(this.username,this.mobile).then(res =>{
			if(res.msg.indexOf('不能重复发送') !== -1) return this.$vux.toast.show(res.msg);
				this.isDisabled = true
				this.$vux.toast.show(res.msg)

				let num = 60;
				var phoneCodeSetInter =  setInterval( () => {
					num--
					this.phoneCodeTxt = num + 's'
					if(num <= 1){
						this.isDisabled = false
						this.phoneCodeTxt = '再次获取'
						clearInterval(phoneCodeSetInter)
					}
				},1000)
		})
    },
    getData() {
		regiset('register',this.username,this.nickname,this.tjuser,this.gluser,this.pos,this.mobile,this.code).then(res =>{
			this.$vux.toast.show(res.msg)

			this.username = ''
			this.nickname = ''
			this.mobile = ''
			this.code = ''
			this.tjuser = ''
			this.gluser = ''
			this.pos = -1
		})
    }
  },
  computed: {
	  ...mapState([
		  'userInfo'
	  ]),
	  codeBtnDisab(){

	  }
  },
  components:{
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/all";

.posWin{@include screen;background-color: transparent;z-index: 100;top:40px;
	.posBg{display: flex;position: fixed;left:5%;top:50%;width:90%;background-color: rgba(0,0,0,.8);color:white;height: 100px;align-items: center;border-radius:10px;transform: translateY(-50%);box-shadow: 0 5px 20px rgba(0,0,0,.5);
		p{margin:0 auto;width:80%;font-size: 16px;text-align: center;}
	}
}

.newVip{padding-bottom: 80px;}
.tit {background-color: #fff;display: flex;
  li {flex: 1;text-align: center;line-height: 40px;font-size: 16px;}
  .red {color: #f60;border-bottom: 1px solid #f60;}
}
.box {padding: 8px;
  .ts {background-color: #fff;padding: 14px 10px;border-bottom: 1px solid #e5e5e5;
    span {display: block;color: #ff5858;margin-bottom: 8px;
    }
  }
}
.list {background-color: #fff;padding-left: 10px;
  li {display: flex;align-items: center;border-bottom: 1px solid #e5e5e5;padding: 10px 0;
    .ps {display: block;width: 100px;}
    p {
      input {outline-style: none;border: none;background-color: #f5f5f9;padding: 5px 8px;}
      .tip {margin-top: 6px;}
      select {background: #f5f5f9;min-height: 1.8rem;line-height: 2rem;border-radius: 6px;padding: 3px 6px;outline-style: none;
        option {font-weight: normal;display: block;white-space: pre;min-height: 1.2em;padding: 0px 2px 1px;outline-style: none;}
      }
      span {display: block;color: green;display: none;}
    }
  }
  .yz {
    p {display: flex;justify-content: space-between;
      input {width: 40%;}
      button {background-color: #6eaa3c;border: none;color: #fff;padding: 8px 10px;border-radius: 5px;}
	  button:disabled{background-color: transparent;color: #999;}
      img {width: 20%;height: auto;}
    }
  }
}
.sub {display: block;background-color: #1aad19;width: 86%;border-radius: 8px;text-align: center;margin: 16px auto;line-height: 44px;border: none;font-size: 18px;color: #fff;}
button {outline-style: none;}
</style>
